<template>
  <div class="row">
    <q-space/>
    <q-btn
      flat
      dense
      icon="add_circle"
      label="增加"
      color="primary"
      @click="addNewDataItem"
    />
    <q-btn
      flat
      dense
      icon="cancel"
      label="删除"
      color="primary"
      @click="removeDataItem"
    />
  </div>
  <div>
    <table class="my-data-node-table">
      <tr>
        <td class="my-label">:</td>
        <td class="my-value">
          <q-input
            dense
            outlined
            readonly
            type="text"
            v-model.lazy="sName"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
      <tr>
        <td class="my-label">变量ID:</td>
        <td class="my-value">
          <VariableSelectBox
            v-model:name="sName"
            v-model:data="sValue"
            :project-arr="uivProjectList"
          />
        </td>
        <td class="my-ext"></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, toRefs } from 'vue';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';

const VariableSelectBox = defineAsyncComponent(() => import('../common/VariableSelectBox.vue'));

export default defineComponent({
  name: 'DataItem',
  components: {
    VariableSelectBox
  },

  props: {
    nodeLabel: {
      type: String,
      default: () => {
        return '标识';
      }
    },
    nodeValue: {
      type: String,
      default: () => {
        return '';
      }
    },

    variableLabel: {
      type: String,
      default: () => {
        return '属性';
      }
    },

    variableValue: {
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  emits: ['update:node-value', 'update:variable-value'],
  setup (props, context) {
    //解构
    const {
      nodeLabel,
      variableLabel,
      nodeValue,
      variableValue
    } = toRefs(props);

    //目录
    const {
      uivProjectList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl()

    //响应数据
    let sName = computed({
      get: () => {
        return nodeValue.value;
      },

      set: (v) => {
        context.emit('update:node-value', v);
      }
    });

    let sValue = computed({
      get: () => {
        return variableValue.value;
      },

      set: (v) => {
        context.emit('update:variable-value', v);
      }
    });

    //挂载组件
    onMounted(() => {
      getUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
    });

    //卸载组件
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.PROJECT_LIST_CODE);
    })

    return {
      nodeLabel,
      variableLabel,
      sName,
      sValue,
      uivProjectList
    };
  }
});

</script>

<style lang="scss" scoped>
.my-data-node-table {
  .my-label {
    font-weight: bolder;
    text-align: left;
    width: 30%;
    height: 30px;
  }
  .my-value {
    text-align: left;
    width: 65%;
  }
  .my-ext {

  }
}
</style>
